<template>
	<view>
		<!--头部个人信息及天气日期信息-->
		<view class="steward-weather">
			<image class="steward-brimg" src="../../../static/images/index.png" mode="aspectFit" />
			<view class="user">
				<view class="user-name" v-text="'Hi,'+ (homeData.empName || '员工')"></view>
				<view class="user-position" v-text="homeData.departmentName||'部门'"></view>
				<view class="user-desc" v-text="homeData.postName ||'职位'"></view>
			</view>
			<view class="weather">
				<view class="temperature">
					<view class="left">{{time.day}}</view>
					<view class="right">
						<view class="humidity">
							<text v-text="time.year+'年' + time.month +'月'"></text>
						</view>
						<view class="temperature-max-min">
							<text v-text="time.week"></text>
						</view>
					</view>
				</view>
				<view class="result">
					<text v-text="'农历：'+calendarData.yinli"></text>
					<text v-text=" '宜：'+ calendarData.yi"></text>
				</view>
			</view>
		</view>
		<!--消息通知-->

		<view class="steward-notice" @click="noticeClick">
			<view class="stewrd-icon">
				<image src="../../../static/images/min.png" />
			</view>
			<view class="stewrd-warpper" @click="onNotice">
				<text class="notice-txt">欢迎来到物业管家</text>
				<text class="notice-time" v-text="time.month+'月' +time.day + '日'"></text>
			</view>
		</view>

		<!--图标列表-->

		<view class="icon-list">
			<view class="item" v-for="item in iconList" :key="item.id" @click="openIconListClick(item)">
				<view class="item-img">
					<image :src="item.imgUrl" alt="" />
				</view>
				<view class="item-title" v-text="item.title"></view>
			</view>
		</view>

		<!--任务完成情况展示-->

		<view class="steward-task">
			<view class="backlog" @click="backlogClick(1)">
				<view class="backlog-desc">
					<text class="num" v-text="homeData.gtasks||'0'"></text>
					<text class="piece">件</text>
					<text class="desc">待办事项</text>
				</view>
				<view class="canvas-container">
					<canvas class="canvas" canvas-id="no1" style="z-index: 1;"></canvas>
					<canvas class="canvas" canvas-id="no" style="z-index: 2;"></canvas>
				</view>
			</view>
			<view class="steward-list">
				<view class="item" @click="backlogClick(3)">
					<view>
						<view>
							<text class="num" v-text="homeData.inProgress||'0'"></text>
							<text class="piece">件</text>
						</view>
						<view class="desc">进行事项</view>
					</view>
					<view class="canvas-container">
						<canvas class="canvas" canvas-id="ising1" style="z-index: 1;"></canvas>
						<canvas class="canvas" canvas-id="ising" style="z-index: 2;"></canvas>

					</view>
				</view>
				<view class="item" @click="backlogClick(4)">
					<view>
						<view>
							<text class="num" v-text="homeData.completed||'0'"></text>
							<text class="piece">件</text>
						</view>
						<view class="desc">已完成</view>
					</view>
					<view class="canvas-container">
						<canvas class="canvas" canvas-id="complete1" style="z-index: 1;"></canvas>
						<canvas class="canvas" canvas-id="complete" style="z-index: 2;"></canvas>
					</view>
				</view>
			</view>
		</view>

		<transition name="fade">
			<page-load v-if="load" ></page-load>
		</transition>



		<view class="bottom-bow"></view>
	</view>
</template>

<script>
	import util from '../../../utils/util.js'
	import { homeModule } from '../../../modules/home.js'
	import { mapState, mapMutations } from 'vuex'
	import pageLoad from '../../../components/loading/pageLoad.vue'

	const home = new homeModule()
	export default {
		components: {
			pageLoad
		},
		data() {
			return {
				iconList: [{
					id: 0,
					imgUrl: '../../../static/images/baoshi.png',
					htmlUrl: '/pages/ReportMatter/index/index',
					title: '报事'
				}, {
					id: 1,
					htmlUrl: '/pages/notice/index/index',
					imgUrl: '../../../static/images/NOTEPAD.png',
					title: '公告'
				}, {
					id: 2,
					imgUrl: '../../../static/images/tongxu.png',
					htmlUrl: '/pages/home/mailList/mailList',
					title: '通讯录'
				}, {
					id: 3,
					imgUrl: '../../../static/images/CALENDAR_OK.png',
					htmlUrl: '/pages/home/guide/guide',
					title: '员工手册',
					num: 2
				}],
				time: {},
				homeData: {},
				calendarData: {},
				load: true
			};
		},
		computed: mapState(['update']),

		onLoad() { //初始化
			this.isLogin()
		},

		onShow() {
			if (this.update) { // 监听update的值 是否可以重新请求页面数据
				this.gethomeData()
				this.onUpdate()
			}
		},

		onPullDownRefresh() { // 下拉刷新
			this.gethomeData()
		},

		onNavigationBarButtonTap() { // 监听右上角按钮事件
			uni.navigateTo({
				url: '/pages/notice/index/index'
			})
		},


		methods: {
			...mapMutations(['onUpdate']),

			isLogin() { // 判断用户是否登录
				const userData = util.getStorage('userData')
				console.log(userData)
				if (!userData) {
					uni.redirectTo({
						url: '/pages/login/login/login'
					})
					return
				}
				this.gethomeData()
			},

			gethomeData() { // 加载首页数据
				const time = util.getNowDate()
				const windowWidth = util.getSystemInfo()['windowWidth'] && util.getSystemInfo().windowWidth 
				this.time = time
				const homeData = home.getHomeData() // 调用首页数据
				const calendarData = home.getCalendarData(time.year, time.month, time.day) // 调用万年历

				Promise.all([homeData, calendarData]) // 赋值
					.then((res) => {
						uni.stopPullDownRefresh()
						console.log('neiID', res[0].neiID)
						util.setStorage('neiID', res[0].neiID)
						this.homeData = res[0]
						this.homeDraw(res[0],windowWidth)
						this.calendarData = res[1]
						this.load = false
					})
			},

			homeDraw(data,windowWidth) { // 绘制任务进度 canvas
				home.drawCanvas('no', data.gtasksPercentage, windowWidth)

				home.drawCanvas('ising', data.inProgressPercentage, windowWidth)

				home.drawCanvas('complete', data.completedPercentage, windowWidth)
			},

			openIconListClick(item) {
				uni.navigateTo({
					url: item.htmlUrl
				})
			},

			backlogClick(index) { // 跳转对应的工单列表
				uni.navigateTo({
					url: `/pages/workOrder/workType/workType?type=${index}`
				})
			},
			
			onNotice() {
				uni.navigateTo({
					url: '/pages/notice/index/index'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "../../../common/scss/common.scss";

	@import "index.scss";

	.fade-enter-active,
	.fade-leave-active {
		transition: opacity 10.5s;
	}

	.fade-enter,
	.fade-leave-to

	/* .fade-leave-active below version 2.1.8 */
		{
		opacity: 0;
		transform: scale(2);
	}
</style>
